<template>
  <div class="about-container">
    <a-card title="关于 tds-app-main" :bordered="false">
      <a-descriptions title="主应用信息" bordered>
        <a-descriptions-item label="应用名称">tds-app-main</a-descriptions-item>
        <a-descriptions-item label="技术栈">Vue3 + Vite + qiankun</a-descriptions-item>
        <a-descriptions-item label="运行模式">
          <a-tag color="red">主应用</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="端口">9091</a-descriptions-item>
        <a-descriptions-item label="版本">1.0.0</a-descriptions-item>
        <a-descriptions-item label="状态">
          <a-badge status="success" text="运行中" />
        </a-descriptions-item>
      </a-descriptions>
      
      <a-divider />
      
      <a-timeline>
        <a-timeline-item>
          <template #dot>
            <CheckCircleOutlined style="color: #52c41a" />
          </template>
          <p>主应用初始化完成</p>
          <p>时间: {{ initTime }}</p>
        </a-timeline-item>
        <a-timeline-item>
          <template #dot>
            <CheckCircleOutlined style="color: #52c41a" />
          </template>
          <p>qiankun 微前端框架集成完成</p>
        </a-timeline-item>
        <a-timeline-item>
          <template #dot>
            <CheckCircleOutlined style="color: #52c41a" />
          </template>
          <p>子应用 tds-ec-web 注册完成</p>
        </a-timeline-item>
        <a-timeline-item>
          <template #dot>
            <CheckCircleOutlined style="color: #52c41a" />
          </template>
          <p>路由系统配置完成</p>
        </a-timeline-item>
      </a-timeline>
      
      <a-divider />
      
      <a-card title="子应用信息" size="small">
        <a-table :columns="columns" :data-source="subApps" :pagination="false" size="small">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'status'">
              <a-badge :status="record.status" :text="record.statusText" />
            </template>
            <template v-else-if="column.key === 'action'">
              <a-button type="link" size="small" @click="visitSubApp(record)">
                访问
              </a-button>
            </template>
          </template>
        </a-table>
      </a-card>
    </a-card>
  </div>
</template>

<script setup>

const router = useRouter()

// 响应式数据
const initTime = ref('')

// 表格列定义
const columns = [
  {
    title: '应用名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '技术栈',
    dataIndex: 'tech',
    key: 'tech',
  },
  {
    title: '访问路径',
    dataIndex: 'path',
    key: 'path',
  },
  {
    title: '端口',
    dataIndex: 'port',
    key: 'port',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: '操作',
    key: 'action',
  },
]

// 子应用数据
const subApps = ref([
  {
    key: '1',
    name: 'tds-ec-web',
    tech: 'Vue3 + Vite + Ant Design Vue',
    path: '/exp',
    port: '9092',
    status: 'success',
    statusText: '已注册',
  },
])

// 生命周期
onMounted(() => {
  initTime.value = new Date().toLocaleString()
})

// 方法
const visitSubApp = (record) => {
  router.push(record.path)
}
</script>

<style lang="scss" scoped>
.about-container {
  .ant-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}
</style> 